<template>
    <view class="delivery_main">
        <view class="flexBox">
            <view class="leftMessage">起始点</view>
            <view style="display: flex">
                <image style="width: 28rpx; height:28rpx;width;28rpx;margin-top:42rpx;margin-right:10rpx"
                    src="../../assets/images/icon_地图定位.png" />
                <view style="font-size: 32rpx; font-weight: 700; color: #252525">
                    {{
                        orderList.startBranchName +
                        " → " +
                        orderList.destinationBranchName
                    }}
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">承运单号</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #252525">
                    {{ orderList.billNo }}
                </view>
            </view>
        </view>
        <view v-for="(good, index) in orderList.goodsInfo" :key="index" v-show="good.goodsNumber - good.upNumber">
            <view class="flexBox" style="background: linear-gradient(90deg, #0966ff 0%, #0658de 100%);color: white;
                              border-radius: 16rpx 16rpx 0 0;">
                <view class="leftMessage" style="color: white">货物名称/件数</view>
                <view style="font-size: 28rpx; font-weight: 700; color: white">
                    {{ good.goodsType + "," + (good.goodsNumber - good.upNumber) + "件" }}
                </view>
            </view>
            <view class="flexBox" v-if="orderList.status == 6">
                <view class="leftMessage">提货件数</view>
                <view style="display: flex; align-items: center">
                    <view style="display: flex" class="myright">
                        <view class="jisuan"
                            style="font-size: 30rpx;border-bottom-left-radius: 10rpx;border-top-left-radius: 10rpx;"
                            @click="pre0(index)">—</view>
                        <view class="jisuantext">
                            <input type="number" v-model.number="jisuan[index]" @blur="changeJisuan(good, index)" />
                            <view style="font-weight: bold; margin-right: 10rpx">件</view>
                        </view>
                        <view class="jisuan" style="border-top-right-radius: 10rpx;border-bottom-right-radius: 10rpx;"
                            @click="add0(good, index)">+</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">取货人</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #252525">
                    {{ orderList.receiver + "," + orderList.receiverMobile }}
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">开单处</view>
            <view class="open_bill">
                <view style="display: flex;font-size: 28rpx; font-weight: 700; color: #252525">
                    {{ orderList.startBranchName }}
                    <span class="company_info" @click="toPlace">网点详情
                        <Right size="11" />
                    </span>
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">库位</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #252525" class="nowrapMsg">
                    <!-- 发货仓 | 第26号仓库 -->
                    {{ orderList.location }}
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">货物状态</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #ff8a00">
                    {{ goodsAllNumber() }}
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">收货人</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #252525">
                    {{ orderList.receiver + "," + (orderList.receiverMobile ? orderList.receiverMobile :
                        orderList.receiverTel) }}
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">发货人</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #252525">
                    {{ orderList.shipper + "," + (orderList.shipperMobile ? orderList.shipperMobile : orderList.shipperTel)
                    }}
                </view>
            </view>
        </view>
        <view class="flexBox">
            <view class="leftMessage">运费</view>
            <view style="display: flex">
                <view style="font-size: 28rpx; font-weight: 700; color: #252525">
                    ￥{{ needCost
                    }}<span style="font-size: 28rpx; color: #fa5151; margin-left: 30rpx">{{ costState }}</span>
                </view>
            </view>
        </view>
        <view style="height: 88rpx; background: white">
        </view>
        <view
            style="font-size: 28rpx;font-weight: 700;color: #252525;line-height: 112rpx;padding-left: 24rpx;padding-right: 24rpx;">
            取货签名与拍照
        </view>
        <view class="hand">
            <view v-if="handImg" class="hand_img" @click="toHandwritingBoard">
                <image :src="handImg" style="width: 100%" />
            </view>
            <view v-else style="
              background: #f8f9fa;
              border: 1rpx dashed #c4c4c4;
              border-radius: 8rpx;
              height: 240rpx;
              width: 100%;
              padding-left: 24rpx;
              padding-right: 24rpx;
              box-sizing: border-box;
              color: #0966ff;
              font-size: 22rpx;
              font-weight: 400;
              display: flex;
              align-items: center;
              " @click="toHandwritingBoard">
                <view style="margin: 0 auto" v-if="orderList.wxStatus != 6">点击绘制签名</view>
            </view>
        </view>


        <view style="padding: 24rpx 0 112rpx">
            <view v-if="orderList.wxStatus == 6">
                <image style="width: 100%" v-for="(i, index) in picArr" :key="index" :src="'http://' + i" />
            </view>
            <!-- <van-uploader v-model="fileList" multiple v-else /> -->
            <nut-uploader ref="uploadRef" :before-xhr-upload="beforeXhrUpload" v-model:file-list="fileList"
                :auto-upload="false" v-else></nut-uploader>
        </view>
        <view class="btnBox" v-if="orderList.wxStatus != 6">
            <nut-button round plain type="info" color="#252525" @click="goBack">取消</nut-button>
            <nut-button round type="info" @click="determine" v-if="needCost != 0">去收款</nut-button>
            <nut-button round type="info" @click="deliveryGoods" v-else>提货</nut-button>
        </view>
        <view style="height: 20rpx"></view>
    </view>
</template>

<script lang="ts" setup>
import { shBaseUrl } from '@/@api/urls'
import useOrderStore from '@/store/order' 
import useUserStore from '@/store/user'
import { Right } from '@nutui/icons-vue-taro'
import Taro, { useDidShow } from '@tarojs/taro'
import { onMounted, ref } from 'vue'


const orderStore = useOrderStore()
const userStore = useUserStore()

const uploadUrl = "http://192.168.10.32:38080/selfmachine-system/workerOrder/filesUpload?billNo=" +
    orderStore.orderInfo.billNo
// 上传dom
const uploadRef = ref()

const localData = []
const localIds = []
const show = false
const handImg = ref('')
const fileList = ref<any>([])
const value1 = ""
const jisuan = ref<number[]>([])
const orderList = ref<any>({})

const getGoods = []
// 提货总数
const totalNum = ref(0)
// 全部图片
const picArr = []

orderList.value = orderStore.orderInfo

const costState = ''
const needCost = 100

useDidShow(() => {
    handImg.value = orderStore.imgUrl
})

onMounted(() => {
    orderList.value.goodsInfo.forEach((item, index: number) => {
        jisuan.value[index] = item.goodsNumber - item.upNumber;
        totalNum.value += item.goodsNumber - item.upNumber;
    });
})
// 减
function pre0(index: number) {
    if (jisuan.value[index] != 0) {
        let num = jisuan.value[index] - 1;
        jisuan.value.splice(index, 1, num);
    }
    if (jisuan.value[index] == 0) {
        getGoods.splice(index, 1);
    }
}
// 加
function add0(good, index: number) {
    if (jisuan.value[index] < good.goodsNumber - good.upNumber) {
        let num = jisuan.value[index] + 1;
        jisuan.value.splice(index, 1, num);
    }
}

// 提货校验
function changeJisuan(good, index: number) {
    if (!jisuan.value[index]) {
        jisuan.value.splice(index, 1, 0);
    }
    if (jisuan.value[index] < 0) {
        jisuan.value.splice(index, 1, 0);
    } else if (jisuan.value[index] > good.goodsNumber - good.upNumber) {
        jisuan.value.splice(index, 1, good.goodsNumber - good.upNumber);
    } else if (jisuan.value[index] != jisuan.value[index]) {
        jisuan.value[index] = jisuan.value[index];
    }
}


function goBack() {
    Taro.navigateBack()
}

function toPlace() { }
//货物剩余总数量
function goodsAllNumber() {
    let num = 0;
    orderList.value.goodsInfo.forEach((item) => {
        num += item.goodsNumber - item.upNumber;
    });
    return "剩余" + num + "件";
}
function toHandwritingBoard() {
    Taro.navigateTo({
        url: './handWrite/index'
    })
}

// 去收款
function determine() {
    Taro.navigateTo({
        url: '../pay/index'
    })
}

// 提货
function deliveryGoods() {

    // 上传签名
    Taro.uploadFile({
        url: shBaseUrl + "/selfmachine-system/workerOrder/signPicUpload" +
            "?billNo=" + orderStore.orderInfo.billNo,
        filePath: orderStore.imgUrl,
        header: {
            "Content-Type": "multipart/form-data",
            Authorization: userStore.token,
        },
        name: 'file',
        success(res) {
            console.log(res);
        }
    })
    // 上传图片
    uploadRef.value.submit()
    // 提货完成
    Taro.showToast({
        title: '提货成功',
        icon: 'success'
    })
    setTimeout(() => {
        Taro.navigateBack()
    }, 500);
}

// 自定义上传方法
const beforeXhrUpload = (taroUploadFile: any, options: any) => {
    //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
    const uploadTask = taroUploadFile({
        url: uploadUrl,
        filePath: options.taroFilePath,
        fileType: options.fileType,
        header: {
            'Content-Type': 'multipart/form-data',
            Authorization: userStore.token
        },
        formData: options.formData,
        name: options.name,
        success(response: { errMsg: any; statusCode: number; data: string }) {
            if (options.xhrState == response.statusCode) {
                options.onSuccess?.(response, options);
            } else {
                options.onFailure?.(response, options);
            }
        },
        fail(e: any) {
            options.onFailure?.(e, options);
        }
    });
    options.onStart?.(options);
    uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
        options.onProgress?.(res, options);
    });
};


</script>

<style lang="scss">
.delivery_main {
    .hand {
        min-height: 240rpx;
        position: relative;

        .hand_img {
            width: 240rpx;
            height: 700rpx;
            transform: rotate(-90deg);
            position: absolute;
            top: -230rpx;
            left: 200rpx;

            image {
                width: 240rpx;
                height: 700rpx;
            }
        }
    }


    .nowrapMsg {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 500rpx;
        text-align: right;
    }

    .dialogMsg {
        font-size: 34rpx;
        height: 176rpx;
        line-height: 176rpx;
        text-align: center;
    }

    .btnBox {
        width: 100%;
        background: white;
        box-sizing: border-box;
        padding: 16rpx;
        height: 112rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        box-shadow: 1rpx 0 0 2rpx rgba(0, 0, 0, 0.05);

        .nut-button {
            width: 344rpx;
            height: 72rpx;
        }
    }

    .main {
        background: white;
        height: 100vh;
        box-sizing: border-box;
        overflow: scroll;
        padding-left: 24rpx;
        padding-top: 16rpx;
        padding-right: 24rpx;
    }

    .open_bill {
        display: flex;

        .company_info {
            font-size: 22rpx;
            color: #0966ff;
            margin-left: 10rpx;
        }
    }

    .leftMessage {
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
    }

    .flexBox {
        padding-left: 24rpx;
        padding-right: 24rpx;
        height: 112rpx;
        line-height: 112rpx;
        display: flex;
        justify-content: space-between;
    }

    .myright {
        width: 300rpx;
        height: 50rpx;
        line-height: 50rpx;

        .jisuan {
            width: 50rpx;
            height: 50rpx;
            font-size: 50rpx;
            font-weight: bold;
            text-align: center;
            line-height: 50rpx;
            background-color: #f8f9fa;
            border: 1rpx solid #c4c4c4;
        }

        .jisuantext {
            width: 200rpx;
            height: 50rpx;
            border-top: 2rpx solid #c4c4c4;
            border-bottom: 2rpx solid #c4c4c4;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            input {
                width: 150rpx;
                height: 50rpx;
                border: 0;
                text-align: center;
            }
        }
    }
}
</style>